<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格 -->
     <el-table :data="tableData" border>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="authName" label="权限名称"> </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="level" label="权限层次">
          <template v-slot="scope">
            <el-tag type="success" v-show="scope.row.level==0">等级一</el-tag>
            <el-tag type="info" v-show="scope.row.level==1">等级二</el-tag>
            <el-tag type="warning" v-show="scope.row.level==2">等级三</el-tag>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>
<script>
import { rightslist } from "../../utils/api";
export default {
  data() {
    return {
      // 存放所有权限数据
      tableData: [],
    };
  },

  mounted() {
    this.rightsList();
  },
  methods: {
    // 渲染页面
    async rightsList() {
      var res = await rightslist();
      console.log("渲染了", res);
      if (res.data.meta.status == 200) {
        this.$message.success(res.data.meta.msg);
        this.tableData = res.data.data;
      }
    },
  },
};
</script>
<style lang="scss">
.el-table {
  margin-top: 30px;
}
</style>